<template>
    <div>
        <NavigationBar></NavigationBar>
        <div class="container">
            <div class="discuss-title">
                <el-card class="box-card">
                    <h1 style="text-align: center;">生活</h1>
                    <p style="text-align: center; font-size: 15px;">
                        蝴蝶飞不过沧海，谁又会忍心责怪
                    </p>
                </el-card>
            </div>
            <el-card v-for="lifeData in lifeArticleInfo" :key="lifeData.id" class="discuss-container">
                <div class="el-card-content">
                    <div class="text-content">
                        <div style="height: 70%;">
                            <router-link :to="{ name: 'DiscussDetail', params: { id: lifeData.id } }" class="button">
                                <h3>{{ lifeData.articleTitle }}</h3>
                            </router-link>
                            <router-link :to="{ name: 'DiscussDetail', params: { id: lifeData.id } }" class="button">
                                <span style="font-size: 13px;"
                                    v-html="lifeData.articleContent.substring(0, 70) + '...'">
                                </span>
                            </router-link>
                        </div>
                        <div class="text-info">
                            <span>{{ lifeData.articleAuthor }}</span>
                            <el-divider direction="vertical"></el-divider>
                            <span>{{ $moment(lifeData.createdTime).format('YYYY-MM-DD') }}</span>
                            <el-divider direction="vertical"></el-divider>
                            <span>生活</span>
                        </div>
                    </div>
                    <router-link :to="{ name: 'DiscussDetail', params: { id: lifeData.id } }" class="button">
                        <el-image :src="lifeData.articleCover" alt="Example JPEG image" class="image"></el-image>
                        <!-- <img :src="require(lifeData.articleCover)" alt="life" class="image"> -->
                    </router-link>
                </div>
            </el-card>
            <div class="study-pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="currentPage1" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                    layout="sizes, prev, pager, next" :total="total">
                </el-pagination>
            </div>
        </div>
        <el-backtop :visibility-height="200" />
    </div>
</template>

<script>
import NavigationBar from '@/components/NavigationBar.vue';
import discussInfoApi from '@/api/discussInfo';

export default {
    components: {
        NavigationBar,
    },
    data() {
        return {
            discussInfo: {},
            lifeArticleData: {},
            lifeArticleInfo: [],
            currentPage1: 1,
            pageSize: 10,
            total: null,
        };
    },
    methods: {
        // methods here
        handleSizeChange(val) {
            this.pageSize = val;
            this.discussInfo = { pageNo: this.currentPage1, pageSize: val };
            console.log(`每页 ${val} 条`);
            this.getDiscussInfo(this.discussInfo);
        },
        handleCurrentChange(val) {
            this.currentPage1 = val;
            this.discussInfo = { pageNo: val, pageSize: this.pageSize };
            console.log(`当前页: ${val}`);
            this.getDiscussInfo(this.discussInfo);
        },
        async getDiscussInfo(discussInfo) {
            try {
                const res = await discussInfoApi.getLifeArticleInfo(discussInfo);
                this.lifeArticleData = res;
                this.lifeArticleInfo = res.result;
                this.total = res.total;
                console.log('获取数据成功:', this.lifeArticleData); // 打印获取的数据
            } catch (error) {
                console.error('获取数据失败:', error); // 异常处理
            }

        }
    },
    mounted() {
        // mounted here
        this.discussInfo = { pageNo: this.currentPage1, pageSize: this.pageSize };
        this.getDiscussInfo(this.discussInfo); // 组件创建时调用数据获取方法
    },
}
</script>

<style scoped>
.container {
    /* display: flex; */
    margin-top: 20px;
    margin-left: 200px;
    margin-right: 200px;
    background-color: #f2f2f2;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.discuss-title {
    /* background-color:red; */
    margin-left: 20px;
    margin-right: 20px;
    /* margin-top: 20px; */
    padding: 20px;
}

.discuss-container {
    /* display: flex; */
    margin-bottom: 20px;
    margin-left: 40px;
    margin-right: 40px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
        /* padding: 20px; */
        /* background-color: red; */
}

.image {
    margin-left: 10px;
    width: 140px;
    height: 140px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 10%;
}

.el-card-content {
    display: flex;
    /* background-color: red; */
}

.text-content {
    width: 90%;
    /* background-color: #409eff; */
}

.button {
    color: #050b10;
    font-size: 14px;
    text-decoration: none;
}

.study-pagination {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.text-info {
    margin-top: 10px;
    font-size: 13px;
}
</style>
